<!-- 首页 -->
<template>
  <div class="jiayi-container home">
    <!-- 第一页 一个大的轮播图-->
    <div class="page_one">
      <el-carousel :interval="4000">
        <el-carousel-item v-for="(bannerImg,index) in homeImageList" :key="'banner_img_'+index">
          <el-image :src="bannerImg"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 第二页  产品展示-->
    <div class="product_display">
      <div class="common__title">
        <div class="common__title_mt_sub"/>
        <span class="common_text_title">Produc&zwnj;t Display</span>
        <span class="common_text_title2">产品展示</span>
      </div>
      <div class="product_display__main">
        <div class="product_display__main_inset">
          <div class="product_display__main_card__pc" v-for="product in productMenuList" @click="gotoPageProduct(product)">
            <div class="title">{{ product.name }}</div>
            <el-image :src="product.poster" fit="cover"/>
          </div>
          <el-row :gutter="10" style="width: 100%">
           <el-col :span="12" class="product_display__main_card__mt" v-for="product in productMenuList">
             <el-image :src="product.poster" fit="cover" @click="gotoPageProduct(product)"/>
             <div class="title" @click="gotoPageProduct(product)">{{ product.name }}</div>
           </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 第三页 新闻动态 -->
    <div class="news_moment">
      <div class="common__title">
        <div class="common__title_mt_sub"/>
        <span class="common_text_title">News & Moments</span>
        <span class="common_text_title2">新闻动态</span>
      </div>
      <div class="news_moment__main flex1">
        <div class="news_moment__main_inset">
          <div class="news_moment__main_inset_data">
            <el-skeleton v-if="isEmptyArr(newsList)" :rows="6"/>
            <div v-else class="news_moment__main_inset_data-item" v-for="news in newsList" @click="gotoPageNews(news)">
              <div class="data-item-img">
                <image-preview :src="news.poster" fit="cover" class="image"/>
              </div>
              <div class="data-item__content">
                <div class="title">{{ news.name }}</div>
                <div class="type">
                  <strong style="margin-right: 1rem;">{{ news.typeDTO.name }}</strong>
                  <span>{{ news.date }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="news_moment__main_inset_menu">

          </div>
        </div>
      </div>
      <!-- 第三页 关于我们 -->
      <div class="about_us" ref="about_us">
        <div class="common__title">
          <div class="common__title_mt_sub"/>
          <span class="common_text_title">About Us</span>
          <span class="common_text_title2">关于我们</span>
        </div>
        <div class="about_us__main flex1">
          <div class="about_us__main_inset">
            <About_us/>
          </div>
        </div>
      </div>
      <!-- 第四页 联系我们 -->
      <div class="call_me" ref="call_me">
        <Call_me/>
      </div>
    </div>
  </div>
</template>

<script>
import {isEmptyArr} from "@/utils/zzDouUtils/arrayUtil"
import About_us from "@/views/jiayi/about_us_sub";
import Call_me from "@/views/jiayi/call_me_sub";
import {get_data} from "@/api";
import {encodeBase64} from "@/utils/zzDouUtils/objUtil";


export default {
  name: "Jiayi_home",
  components: {About_us, Call_me},
  data() {
    return {
      doc: {},
      homeImageList: [],
      productMenuList: [],
      newsMenuList: [],
      newsList: [],
    };
  },
  watch: {},
  mounted() {
  },
  created() {
    this.getIndexData();
  },
  methods: {
    getIndexData(){
      get_data().then(response=>{
        this.homeImageList = response.homeImage;
        this.productMenuList = response.productMenu;
        this.newsMenuList = response.newsMenu;
        this.newsList = response.newsList;
      })
    },
    isEmptyArr,
    gotoPageProduct(row) {
      this.$router.push({path: '/product/type',query:{ j :encodeBase64(row.id)}})
    },
    gotoPageNews(row){
      this.$router.push({path: '/news/info',query:{ j :encodeBase64(row.id)}})
    },
    scrollIntoView(ref){
      this.$nextTick(()=>{
        this.$refs[ref].scrollIntoView();
      })
    }
  }
};
</script>
<style>
.home{
  display: flex;
  flex-direction: column;
  justify-content: start;
}
/* 第一页 图 */
.page_one{
  width: 100vw !important;
  height: 85vh !important;
}
.page_one .el-carousel{
  width: 100vw !important;
  height: 85vh !important;
}
.page_one .el-carousel__container{
  height: 100% !important;
}
.page_one .page_one_mt{
  height: 100%;
}
.page_one .el-image{
  width: 100%;
  height: 100%;
}

/* ---- 第二页 产品展示 ---- */
.product_display{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.product_display__main{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.product_display__main_inset{
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-flow: wrap;
  overflow: hidden auto;
  padding: 0.2%;
  background: transparent;
  /*box-shadow: 1px 2px 4px rgba(0, 0, 0, .12), 1px 1px 6px rgba(0, 0, 0, .04);*/
  /*border-radius: 1rem;*/
}
.product_display__main_card__pc{
  width: 17%;
  height: 20rem;
  border-radius: 1rem;
  background: rgb(120, 175, 249);
  color: #FFFFFF;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .12), 1px 1px 6px rgba(0, 0, 0, .04);
  margin: 0.5% 0.2% 1% 0.2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.product_display__main_card__pc .title{
  font-size: 1.6rem;
  font-weight: bold;
  height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.product_display__main_card__pc:hover{
  transform: scale(1.05);
  transition-duration: 200ms;
}
.product_display__main_card__pc .el-image{
  flex: 1;
  border-radius: 1rem;
  width: 100%;
}


/* ---- 第二页 新闻动态 ---- */
.news_moment{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.news_moment__main{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.news_moment__main_inset{
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
}
.news_moment__main_inset_data{
  width: 65%;
  max-height: 60vh;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.news_moment__main_inset_data-item{
  width: 95%;
  margin: 0.4rem 0 0.5rem 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.news_moment__main_inset_data-item .data-item-img{
  width: 25%;
  text-align: center;
}

.news_moment__main_inset_data-item .data-item-img .image{
  width: 10rem;
  height: 10rem;
  border-radius: 1rem;
}

.news_moment__main_inset_data-item .data-item__content{
  width: 50%;
  height: 9.9rem;
  padding: 1rem 0 1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  cursor: pointer;
}

.news_moment__main_inset_data-item .data-item__content .title{
  width: 100%;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
}
.news_moment__main_inset_data-item .data-item__content .type{
  width: 100%;
  height: 10%;
}
.news_moment__main_inset_data-item .data-item__content:hover{
  color: #409EFF;
  text-decoration: underline;
}


.news_moment__main_inset_menu{
  width: 40vh;
  height: 40vh;
  /*background: #4AB7BD url('../../images/news.jpeg') no-repeat;*/
  background-size: 100% 100%;
  /*display: flex;*/
  /*flex-direction: row;*/
  /*justify-content: space-between;*/
  /*align-items: start;*/
  /*flex-flow: wrap;*/

}


/* ---- 第三页 关于我们 ---- */
.about_us{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.about_us__main{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.about_us__main_inset{
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
}

/* ---- 第四页 联系我们 ---- */
.call_me{
  width: 100%;
  background: #E4E7ED;
}

/* ------- 公共参数 ------*/
@font-face {
  font-family: 'mochadahliademoversion';
  src: url('../../assets/font/mochadahliademoversion-xrol0.otf'),
}
.common__title{
  width: 100%;
  height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.common_text_title{
  font-size: 2rem;
  font-weight: bold;
  color: #67C23A;
  font-family: 'mochadahliademoversion';
}
.common_text_title2{
  font-size: 1.2rem;
  color: #67C23A;
}

/*滚动条整体样式*/
::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 0.1rem;
}

/*------- 响应式布局 -------*/
/* 手机（小屏幕） */
@media (width <= 992px) {
  html{
    font-size: 14px;
  }
  .page_one{
    height: 37vh;
  }
  .page_one .el-carousel{
    height: 37vh !important;
  }
  .common__title{
    width: 100%;
    height: 8vh;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: 1rem;
  }
  .common__title_mt_sub{
    width: 3%;
    height: 100%;
    background: #409eff;
    border-radius: 0.2rem;
  }
  .common_text_title{
    font-size: 1.8rem;
    padding-left: 0.5rem;
  }
  .common_text_title2{
    font-size: 1.2rem;
    padding-left: 1rem;
  }
  /* ---- 第二页 产品展示 ---- */
  .product_display__main{
    max-height: 60vh;
  }
  .product_display__main_inset{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    overflow: hidden auto;
    box-shadow: none;
    border-radius: 0;
  }
  .product_display__main_card__pc{
    display: none;
  }
  .product_display__main_card__mt{
    width: 50%;
    height: 4rem;
    border-radius: 1rem;
    color: #303133;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .product_display__main_card__mt .title{
    width: 70%;
    height: 100%;
    padding-left: 0.5rem;
    font-size: 1em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
  }
  .product_display__main_card__mt:hover{
    transform: scale(1.05);
    transition-duration: 200ms;
  }
  .product_display__main_card__mt .el-image{
    border-radius: 1rem;
    width: 3.3rem;
    height: 3.3rem;
  }

  /* ---- 第二页 新闻动态 ---- */
  .news_moment__main_inset{
    width: 90%;
  }
  .news_moment__main_inset_data{
    width: 100%;
  }
  .news_moment__main_inset_data-item{
    width: 100%;
    justify-content: space-around;
  }
  .news_moment__main_inset_data-item .data-item-img{
    width: 20%;
  }
  .news_moment__main_inset_data-item .data-item-img .image{
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.5rem;
  }
  .news_moment__main_inset_data-item .data-item__content{
    width: 70%;
    height: 4.5rem;
    padding: 0.1rem 0 0.7rem 0;
  }
  .news_moment__main_inset_data-item .data-item__content .title{
    width: 100%;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
  }
  .news_moment__main_inset_data-item .data-item__content .type{
    width: 100%;
    font-size: 0.7rem;
    height: 7%;
  }

  .about_us__main_inset{
    width: 100%;
  }

  .news_moment__main_inset_menu{
    display: none;
  }
}

/* 平板 */
@media (width > 992px) and (width < 1200px) {
  html{
    font-size: 12px;
  }
}

@media (width > 992px) {
  .nav_menu__mt{
    display: none;
  }
  .common__title_mt_sub{
    display: none;
  }
  .product_display__main_card__mt{
    display: none;
  }
}

</style>
